<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试js控制dom对象，也就是获取html元素及其属性</title>
</head>
<body>
    <p name="pn">hello1221</p>
    <p name="pn">hello1221</p>
    <p name="pn">hello1221</p>
    <a name="pn">hello</a>
    <a name="pn">hello1</a>
    <a name="pn">hello2</a>
    <a href="#" id="aid" title="a标签的标题">nihao</a>
    <a href="#" id="aid2" class="smallpicture">welcome</a>
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>e</li>
        <li>f</li>
    </ul>
    <hr>
    <div id="div">
        <p id="pid">今天天气真好</p>
    </div>
    <script>
        function getName() {
            var count=document.getElementsByName("pn");//用标签的name调用函数
            // alert(count.length);
            var p=count[1];
            p.innerHTML="world100";
        }
        getName();
    </script>
    <script>
        function getName1() {
            var count1=document.getElementsByTagName("a");//用标签种类调用函数
            var p1=count1[2];
            p1.innerHTML="world";
        }
        getName1();
    </script>
    <script>
        function demo() {
            var anode=document.getElementById("aid");//获得元素id为aid的元素
            var attr=anode.getAttribute("title"); //获得属性为title的值
            alert(attr);
        }
        demo();
        function setAttr() {
            var anode=document.getElementById("aid2");//获得元素id为aid2的元素
            anode.setAttribute("class","box");//修改属性值为box
            var attr=anode.getAttribute("class");//获取属性
            alert(attr);//打印出来
        }
        setAttr();//调用函数
        function getChildNode() {
            var childnode=document.getElementsByTagName("ul")[0].childNodes;
            alert(childnode.length);
            alert(childnode[0].nodeType);
        }
        getChildNode();
        function getParentDode() {
            var div=document.getElementById("pid");//获得pid
            alert(div.parentNode.nodeName);//弹出父节点
        }
        getParentDode();
        function createNode() {
            var body=document.body;
            var input=document.createElement("input");
            input.type="button";
            input.value="按钮";
            body.appendChild(input);//添加元素节点
        }
        createNode();
        function addNode() {
            var div=document.getElementById("div");//获得元素ID为div 为了精确定位用
            var node=document.getElementById("pid");//获得元素ID为pid 为了精确定位用
            var newnode=document.createElement("p");//创造元素p
            newnode.innerHTML="这个是修改后的p元素";//新元素改为“这是修改后的p元素”
            div.insertBefore(newnode,node);//插入谁之前（创建的函数 目标函数）
        }
        addNode();
        //删除
        function removeNode() {
            var div=document.getElementById("div");
            var p=div.removeChild(div.childNodes[1]);//要删除的对象 第一个
        }
        removeNode();
        // function getSize() {
        //     var Width=document.documentElement.offsetWidth; //网页宽度 这是一种方式
        //     var Height=document.documentElement.offsetHeight;//网页高度 这是一种方式
        //     alert(Width+","+Height);//弹出 宽度和高度
        // }
        // getSize();
        function getSize() {
            var Width=document.body.offsetWidth||document.documentElement.offsetWidth;//适用于各个浏览器
            var Height=document.body.offsetHeight||document.documentElement.offsetHeight;//适用于各个浏览器
            alert(Width+","+Height);//弹出 宽度和高度
        }
        getSize();
    </script>
</body>
</html>